<template>
  <div class="goods-sku">
    <dl v-for="(item, index) in goods.specs" :key="index">
      <dt>{{ item.name }}</dt>
      <!-- <dt>{{ item.values }}</dt> -->
      <dd>
        <template v-for="(i, index2) in item.values" :key="index2">
          <img
            :class="{ selected: i.selected, disabled: i.disabled }"
            :title="i.name"
            :src="i.picture"
            alt=""
            v-if="i.picture"
            @click="itemClick(i, item.values)"
          />
          <span
            :class="{ selected: i.selected, disabled: i.disabled }"
            @click="itemClick(i, item.values)"
            v-else
            >{{ i.name }}</span
          >
        </template>
      </dd>
    </dl>
    <!-- <dl>
      <dt>尺寸</dt>
      <dd>
        <span class="disabled">10英寸</span>
        <span class="selected">20英寸</span>
        <span>30英寸</span>
      </dd>
    </dl>
    <dl>
      <dt>版本</dt>
      <dd>
        <span>美版</span>
        <span>港版</span>
      </dd>
    </dl> -->
  </div>
</template>
<script>
import bwPowerSet from '../../../vender/power-set'
// 数组字典处理  这是有货的
function getPathMap (skus) {
  const pathMap = {}
  const str = '##'
  skus.forEach(item => {
    // console.log(item)
    if (item.inventory) {
      // 有货才筛选
      const _arr = bwPowerSet(item.specs.map(v => v.valueName))
      // console.log(_arr)
      _arr.forEach(i => {
        pathMap[i.join(str)] = true
      })
    }
  })
  // console.log(pathMap)
  return pathMap
}
// 处理默认禁用的商品（没货的商品按钮禁用）
function disabledState (goods, pathMap) {
  // console.log(goods)
  goods.specs.forEach((item, index) => {
    // getSelected(goods)
    const _selectArr = getSelected(goods)
    // console.log(_selectArr)
    item.values.forEach(v => {
      v.disabled = !pathMap[v.name]
      if (_selectArr[index] === v.name) {
        console.log(1)
      } else {
        _selectArr[index] = v.name
        const res = _selectArr.filter(v => v)
        // console.log(res)
        const re = res.join('##')
        // console.log(re)
        // console.log(pathMap[re])
        v.disabled = !pathMap[re]
      }
    })
  })
  // console.log(goods)
}
// 获得选择的商品属性
function getSelected (goods) {
  const _arr = []
  goods.specs.forEach((item, index) => {
    // console.log(item.values)
    const _temp = item.values.find(v => v.selected)
    // console.log(_temp)

    // if(_temp){
    _arr[index] = _temp ? _temp.name : undefined
    // }
  })
  // console.log(_arr)
  return _arr
}
// 根据skuid，选中相对应的属性
function initSelected (goods, skuId) {
  const _result = goods.skus.find(v => v.id === skuId)
  console.log(_result)
  // _result.values.forEach()
  if (_result) {
    const _resultArr = _result.specs.map(v => v.valueName)
    // console.log(_resultArr)
    goods.specs.forEach(item => {
      item.values.forEach(sub => {
        // console.log(sub)
        sub.selected = _resultArr.includes(sub.name)
        // console.log(_resultArr.includes(sub.name))
        // console.log(goods)
      })
    })
  }
}
// 选择完成之后通知父组件，发送选中的skuid
function getSelectedSkuId (goods, emit) {
  const _arr = getSelected(goods).filter(v => v)
  // console.log(_arr)
  if (_arr.length === goods.specs.length) {
    // console.log(2)
    const _result = goods.skus.find(item => {
      // console.log(item)
      const _temp = item.specs.map(sub => sub.valueName).join('##')
      // console.log(_temp)
      return _temp === _arr.join('##')
    })
    // console.log(_result)
    emit('getSkuId', _result)
  } else {
    emit('getSkuId', {})
  }
}
export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => {}
    },
    skuId: {
      type: String,
      default: '1369155864430120962'
    }
  },

  setup (props, { emit }) {
    const pathMath = getPathMap(props.goods.skus)
    disabledState(props.goods, pathMath)
    // console.log(props.goods)
    function itemClick (item, itemArr) {
      // if (item.selected) return
      if (item.disabled) return
      //   console.log(item, itemArr)
      if (!item.selected) {
        // console.log(1)
        itemArr.forEach(i => {
          //   console.log(i)
          i.selected = false
        })
      }
      item.selected = !item.selected
      disabledState(props.goods, pathMath)
      getSelectedSkuId(props.goods, emit)
    }
    initSelected(props.goods, props.skuId)
    return { itemClick }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
